<template>
	<view class="content">
		<view class="">
			<view class="margin-top-sm margin-bottom-sm">
			文字描述
		</view>
		<view class="par">
			<u--textarea v-model="value2" placeholder="请输入详细内容..." maxlength='100' class="texcte"></u--textarea>
			<view class="count">
				100字以内
			</view>
		</view>
		</view>
		<view class="">
			<view class="margin-top-sm margin-bottom-sm">
				照片上传
			</view>
			<view class="par">
				<view class="item" v-for="(item,index) in imgList">
					<image :src="item" mode="" class="img"></image>
				</view>
				<view class="item" @click="tptp()">
					<image src="../../static/img/report/upImg.png" mode="" class="img"></image>
					<view class="">
					 	添加图片
					</view>
				</view>
				<view class="plac">
					支持jpg、png、gif格式
				</view>
			</view>
		</view>
		<view class="">
			<view class="margin-top-sm margin-bottom-sm">
				短视频上传
			</view>
			<view class="par">
				<view class="item">
					<image src="../../static/img/report/video.png" mode="" class="img-1"></image>
					<view class="">
						添加视频
					</view>
				</view>
				<view class="plac">
					控制在5分钟内，50M左右支持mp4、avi、rar、zip格式
				</view>
			</view>
		</view>
		<view class="">
			<view class="margin-top-sm margin-bottom-sm">
				录音上传
			</view>
			<view class="par">
				<view class="item">
					 <image src="../../static/img/report/audio.png" mode="" class="img"></image>
					 <view class="">
					 	添加录音
					 </view>
				</view>
				<view class="plac">
					控制在十分钟内
				</view>
			</view>
		</view>
		
        <button type="default" class="btn">保存并提交</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value2:'',
				imgList:[],
			}
		},
		methods: {
			tptp(){
				let that = this
				uni.chooseImage({
					count: 6, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					// sourceType: ['album'], //从相册选择
					success: function (res) {
						const tempFilePaths = res.tempFilePaths;
						uni.uploadFile({
							url: 'http://125.62.52.200:8816/i/upload-img',
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								'user': 'test'
							},
							success: (uploadFileRes) => {
								let arr = JSON.parse(uploadFileRes.data);
								
								if(arr.code == 200){
									that.imgList.push(arr.data)
								}
							}
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.btn{
		border: 0;
		color: white;
		background-color: #F04B3F;
		border-radius: 30upx;
		margin: 120upx 0 0 0;
	}
	.margin-top-sm{
		font-weight: 900;
		font-size: 34upx;
		margin: 40upx 0 0 0;
	}
	.plac{
		color: #808080;
		font-size: 25upx;
		max-width: 320upx;
	}
	.item{
		width: 200upx;
		height: 200upx;
		background-color: #FFF8F7;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		color: #F04B3F;
		border-radius: 20upx;
		font-size: 28upx;
	}
	.img{
		width: 90upx;
		height: 90upx;
	}
	.img-1{
		width: 100upx;
		height: 60upx;
	}
	.par{
		position: relative;
	}
	.content{
		padding: 0 40upx 100upx 40upx;
		box-sizing: border-box;
	}

	.texcte{
		background-color: #FFF8F7;
		border-radius: 30upx;
		height: 270upx;
		border: 0;
	}
	.count{
		right: 30upx;
		bottom: 10upx;
		color: #808080;
		position: absolute;
	}
   
</style>
